<form [formGroup]="userForm">
  <nz-form-item>
    <nz-form-label nzRequired nzFor="email">邮箱</nz-form-label>
    <nz-form-control>
      <input nz-input formControlName="email" id="email" placeholder="输入邮箱" />
      <nz-form-explain *ngIf="!(userForm.get('email').valid || userForm.get('email').untouched)">
        <span class="text-danger" *ngIf="userForm.get('email').hasError('required')">
          带*项不能为空!
        </span>
        <span *ngIf="userForm.get('email').hasError('email')">
          邮件格式不正确!
        </span>
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <div nz-row nzGutter="16">
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label nzRequired nzFor="lastName">名字</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="lastName" id="lastName" placeholder="输入名字" />
          <nz-form-explain *ngIf="!(userForm.get('lastName').valid || userForm.get('lastName').untouched)">
            <span class="text-danger" *ngIf="userForm.get('lastName').hasError('required')">
              带*项不能为空!
            </span>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col nzSpan="12">
      <nz-form-item>
        <nz-form-label nzRequired nzFor="firstName">姓氏</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="firstName" id="firstName" placeholder="输入姓氏" />
          <nz-form-explain *ngIf="!(userForm.get('firstName').valid || userForm.get('firstName').untouched)">
            <span class="text-danger" *ngIf="userForm.get('firstName').hasError('required')">
              带*项不能为空!
            </span>
            <span class="text-danger" *ngIf="userForm.get('firstName').hasError('email')">
            </span>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>

  <div nz-row nzGutter="16">
    <div nz-col nzSpan="12">
      <nz-form-label for="group" class="modal-box-label" nzRequired>所属小组</nz-form-label>
      <nz-select style="width: 100%" formControlName="groupUuid" nzSize="default" class="modal-box-form">
        <nz-option *ngFor="let group of groupList" [nzValue]="group.groupUuid" [nzLabel]="group.groupName">
        </nz-option>
      </nz-select>
      <div *ngIf="!(userForm.get('groupUuid').valid || userForm.get('groupUuid').untouched)">
        <span class="text-danger" *ngIf="userForm.get('groupUuid').hasError('required')">
          带*项不能为空!
        </span>
      </div>
    </div>
    <div nz-col nzSpan="12">
      <nz-form-label for="group" class="modal-box-label" nzRequired>角色</nz-form-label>
      <nz-select style="width: 100%" formControlName="roleUuid" nzSize="default" class="modal-box-form">
        <nz-option *ngFor=" let role of roleGroup" [nzValue]="role.roleUuid" [nzLabel]="role.roleName">
        </nz-option>
      </nz-select>
      <div *ngIf="!(userForm.get('roleUuid').valid || userForm.get('roleUuid').untouched)">
        <span class="text-danger" *ngIf="userForm.get('roleUuid').hasError('required')">
          带*项不能为空!
        </span>
      </div>
    </div>
  </div>

  <nz-form-item>
    <nz-form-control class="modal-footer">
      <button nz-button nzType="primary" class="modal-footer-btn"
        (click)="updateUser()">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
      <button nz-button nzType="default" class="modal-footer-btn" nzGhost
        (click)="destroyModal()">取&nbsp;&nbsp;&nbsp;&nbsp;消</button>
    </nz-form-control>
  </nz-form-item>
</form>